<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>

     <style>
	   div {
		  width: 900px;
		  height: 50px;
		  border: 5px solid pink;
		  border-radius: 20px;
		  background-image: linear-gradient(135deg,
		  green 0%,
		  green 25%,
		  yellow 25%,
		  yellow 50%,
		  green 50%,
		  green 75%,
		  yellow 75%,
		  yellow 100%
		  );
		  /* animation: name duration timing-function delay iteration-count direction fill-mode; */
      animation:  move 2s  infinite  linear;
		} 

		@keyframes move {
			0% {
			background-position-x: right;
		 

		  /* transform:  translateX(100%) */

			}

		     	100%{
			 background-position: left 0 
		
			


			}
		}

	 
	 
	 
	 </style>
</head>
<body>
	<div></div>
</body>
</html>